<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Comments</title>
    <style type="text/css">
        ul li{
            list-style: none;
        }
        .small{
            font-size: small;
        }
        .like{
            float: right;
        }
        .a{
            width:800px;
        }
    </style>
    <script src="/jquery-3.4.1.min.js"></script>
</head>
<body>
    <br/>
    <h1>评论</h1>
    <form action="/comment/post" method="post">
        <input type="text" name="nickName" value="yyh" style="width: 20%;height: 20px;">
        <input type="hidden" name="songId" value="35847388">
        <input type="text" name="content" style="width: 60%;height: 100px;display: block" placeholder="填写你的评论">
        <br/>
        <button type="submit">评论</button>
    </form>
    <h3>精彩评论</h3>
    <ul th:each="comment:${comments}" style="width: 60%">
        <hr/>
        <li>
            <img th:src="${comment.icon}">
            <span th:text="${comment.nickName}"></span>：
            <span th:utext="${comment.content}"></span>
        </li>
        <li>
            <label class="small">评论时间：</label>
            <span class="footer" th:text="${#dates.format(comment.commentTime, 'yyyy-MM-dd HH:mm:ss')}"></span>
            <div class="like">
                <a href="#" th:data-id="${comment.id}" class="like-btn">
                    <span th:text="${comment.likeNum}"></span>
                </a>
                <span> | </span><label class="small">回复</label>
            </div>
        </li>
        <br />
    </ul>
<script>
    $(function (){
        $(".like-btn").on('click',function(e){
            e.preventDefault();//阻断浏览器默认行为
            let self = $(this);//得到当前的超链接
            let commentId = self.data('id');//得到了后端传来的data-id的值
            $.ajax({
                url:"/comment/like",
                method:"POST",
                data:{
                    songId:"35847388",
                    commentId:commentId
                },
                cache:false//不让浏览器做缓存
            })//传参
            .done(function (data) {//data是由commentLikeControl提供的json
                self.html(data.likeNum);
            });
        });
    });
</script>
</body>
</html>